<template>
  <div class="">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
      class="form-search"
    >
      <SearchTool
        :code="{
          factory: 'factory',
          workshop: 'workSection',
          line: 'pdcLine',
          section: 'processSection',
        }"
        v-model:factory="queryParams.factory"
        v-model:workshop="queryParams.workSection"
        v-model:line="queryParams.pdcLine"
        v-model:section="queryParams.processSection"
      ></SearchTool>
      <el-form-item label="线边仓" prop="leWarehouse">
        <StoreSelect
          v-model="queryParams.leWarehouse"
          :line="queryParams.pdcLine"
          :section="queryParams.processSection"
          placeholder="请选择线边仓"
        ></StoreSelect>
      </el-form-item>
      <el-form-item label="出入仓单号" prop="orderCode">
        <el-input
          v-model="queryParams.orderCode"
          placeholder="请输入出入仓单号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item :label="titleName + '名称'" prop="materialName">
        <el-input
          v-model="queryParams.materialName"
          placeholder="请输入名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="批次号" prop="batchNumber">
        <el-input
          v-model="queryParams.batchNumber"
          placeholder="请输入批次号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="出入仓时间段" prop="inOutTime">
        <el-date-picker
          v-model="dateRange"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="出入仓类型" prop="inOutType">
        <el-select v-model="queryParams.inOutType" clearable filterable placeholder="出入仓类型">
          <el-option
            v-for="dict in orderType"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
        <el-button icon="refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="inStorehouseList"
      border
      maxHeight="500"
      style="width: 100%"
      show-overflow-tooltip
    >
      <el-table-column label="出入仓类型" align="center" prop="inOutType">
        <template #default="scope">
          <dict-tag :options="orderType" :value="scope.row.inOutType" />
        </template>
      </el-table-column>
      <el-table-column label="单据编号" align="center" width="150" prop="orderCode">
        <template #default="scope">
          <el-link type="primary" @click="handleDetail(scope.row)">
            {{ scope.row.orderCode }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column :label="titleName + '名称'" align="center" prop="materialName" />
      <el-table-column :label="titleName + '编号'" align="center" prop="materialCode" />
      <el-table-column label="入仓数量" align="center" prop="warehouseInNum" />
      <el-table-column label="出入仓时间" align="center" prop="inOutTime" />
      <el-table-column label="确认人员" align="center" prop="confirmPersonnel" />
      <el-table-column label="线边仓" align="center" prop="leWarehouseName" />
      <el-table-column label="库位" align="center" prop="loWarehouseName" />
      <el-table-column label="批次号" align="center" prop="batchNumber" />
      <el-table-column label="工厂" align="center" prop="factoryName" />
      <el-table-column label="工段" align="center" prop="workShopName" />
      <el-table-column label="产线" align="center" prop="lineName" />
      <el-table-column label="工艺段" align="center" prop="sectionName" />
      <el-table-column label="来源" align="center" prop="source" />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { warehouseRecord } from "@/api/warehouse/inStorehouse";
import { listWhStorehouseOut } from "@/api/warehouse/WhStorehouseOut";
import { listInStorehouse } from "@/api/warehouse/inStorehouse";
import inWarehouse from "./inWarehouse.vue";
import outWarehouse from "./outWarehouse.vue";
import moveStore from "./moveStore.vue";
import Inventory from "./inventory.vue";
import prowarehouse from "./prowarehouse.vue";

import WareHouseOut from "./wareHouseOut.vue";
import WareHouse from "./wareHouse.vue";

export default {
  name: "RecordTable",
  props: {
    name: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      dateRange: [],
      // 子表选中数据
      checkedWhStorehouseInDetail: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 物料入仓表格数据
      inStorehouseList: [],
      // 物料入仓明细表格数据
      whStorehouseInDetailList: [],
      selectData: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        matType: this.name,
      },
      in_storehouse_status: [],
      inout_storehouse: [],
      prod_inout_storehouse: [],
    };
  },
  computed: {
    titleName() {
      return this.name == "mat" ? "物料" : "产品";
    },
    orderType() {
      return this.name == "mat" ? this.inout_storehouse : this.prod_inout_storehouse;
    },
  },
  created() {
    const { in_storehouse_status, inout_storehouse, prod_inout_storehouse } = this.useDict(
      "in_storehouse_status",
      "inout_storehouse",
      "prod_inout_storehouse"
    );
    this.in_storehouse_status = in_storehouse_status;
    this.inout_storehouse = inout_storehouse;
    this.prod_inout_storehouse = prod_inout_storehouse;
    this.getList();
  },
  methods: {
    /** 查询物料入仓列表 */
    getList() {
      this.loading = true;
      const param = {
        ...this.queryParams,
        startTime: this.dateRange[0] ? this.dateRange[0] + " 00:00:00" : undefined,
        endTime: this.dateRange[1] ? this.dateRange[1] + " 23:59:59" : undefined,
      };
      warehouseRecord(param)
        .then((response) => {
          this.inStorehouseList = response.rows;
          this.total = response.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 修改按钮操作 */
    handleDetail(row) {
      if (row.inOutType === "0" || row.inOutType === "1") {
        if (this.name == "mat") {
          this.subPage(inWarehouse, { title: "入仓详情", data: row }, () => {
            this.getList();
          });
        } else {
          this.subPage(prowarehouse, { title: "入仓详情", data: row }, () => {
            this.getList();
          });
        }
      } else if (row.inOutType === "2" || row.inOutType === "3") {
        this.subPage(outWarehouse, { title: "出仓详情", data: row }, () => {
          this.getList();
        });
      } else if (row.inOutType === "4" || row.inOutType === "5") {
        this.subPage(Inventory, { title: "盘点详情", data: row }, () => {
          this.getList();
        });
      } else if (row.inOutType === "6" || row.inOutType === "7") {
        this.subPage(moveStore, { title: "调拨详情", data: row }, () => {
          this.getList();
        });
      } else if (row.inOutType === "9") {
        // 退料入仓
        listInStorehouse({
          pageNum: 1,
          pageSize: 10,
          inOrderCode: row.orderCode,
          inOrderType: "0,9",
        })
          .then((response) => {
            console.log(response);
            //
            if (response && response.rows && response.rows.length == 1) {
              response.rows[0].mainTableId = response.rows[0].id;
              this.subPage(WareHouse, { title: "入仓详情", data: response.rows[0] }, () => {
                this.getList();
              });
            }
          })
          .catch(() => {
            this.loading = false;
          });
      } else if (row.inOutType === "10") {
        // row.orderCode
        listWhStorehouseOut({
          pageNum: 1,
          pageSize: 10,
          code: row.orderCode,
          type: "2,10",
        })
          .then((response) => {
            console.log(response);
            if (response && response.rows && response.rows.length == 1) {
              response.rows[0].mainTableId = response.rows[0].id;
              this.subPage(WareHouseOut, { title: "投料出仓详情", data: response.rows[0] }, () => {
                this.getList();
              });
            }
          })
          .catch(() => {
            this.loading = false;
          });

        // this.subPage(feedingData, { title: "投料详情", data: row }, () => {
        //   this.getList();
        // });
      }
    },
  },
};
</script>
